jQuery 是一个 JavaScript 函数库。jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。
jQuery获取元素
元素选择器
id选择器
class选择器
1
2
|
$(".class") $("div.class")
|
属性过滤选择器
1
2
3
| <li class='check' type='li_01'></li>
<li type='li_02'></li>
<li type='li_03'></li>
|
1
2
3
4
5
6
7
8
9
|
$("[type]")
$("[type='li_01']")
$("[type!='li_01']")
$("[type*='li']")
$("[type^='li']")
$("[type$='01']")
$("li[class='check'][type]")
|
* 选择器
1
2
|
$('form *').css('margin','0px')
|
并列选择器
1
| $('p, div').css('color','red');
|
层叠选择器
1
2
3
4
5
6
7
8
| <div class='a'>
<div class='a1'>
<div class='a11'></div>
</div>
<div class='a2'></div>
<div class='a3'></div>
<span></span>
</div>
|
1
2
3
4
| $(".a div")
$(".a > div")
$("div + span")
$(".a1 ~ div")
|
基本过滤选择器
1
2
3
4
5
6
7
| <ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
|
1
2
3
4
5
6
7
| $("li:first")
$("li:last")
$("li:even")
$("li:odd")
$("li:eq(2)")
$("li:gt(3)")
$("li:ll(2)")
|
1
2
| <input type="checkbox" />
<input type="checkbox" />
|
1
2
| $("input[type='checkbox']:checked")
$("input[type='checkbox']:not(:checked)")
|
内容过滤器
1
2
3
4
| $("div:contains('Faker')")
$("div:empty")
$("div:has('p')")
$("div:parent")
|
可视化过滤器
1
2
3
4
| $("div:hidden")
$("div:not(:hidden)")
$("div:visible")
$("div:not(:visible)")
|
子元素过滤器
1
2
3
4
5
6
7
8
| <body>
<div class='d1'>
<div class='d11'>
<div class='d111'>
</div>
</div>
</div>
</body>
|
1
2
3
4
5
6
7
8
| $("body div:first-child")
$("div span:last-child")
$("div button:only-child")
|
表单元素选择器
1
2
3
4
5
6
7
8
9
10
11
| $(":input")
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$(":hidden")
|
表单元素过滤器
1
2
3
4
| $(":enabled")
$(":disabled")
$(":checked")
$("select option:selected")
|
节点操作
获取和操作节点属性
1
2
| <a href='index.html' data-type='a' style="color:red;">index</a>
<input value='user' />
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| $("a").attr("href");
$("a").attr("href","about.html");
$("a").data("type");
$("a").css("color");
$("a").css("color","black");
$("a").text();
$("a").text("Index.html");
$("input").val();
$("input").val("username");
|
插入节点的方法
1
2
3
| <div class="head">
<span>Faker<span>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| $(".head").append("<span>hello</span>")
$("<span>hello</span>").appendTo(".head")
$(".head").prepend("<span>hello</span>")
$("<span>hello</span>").prependTo(".head")
$(".head *:first").after("<span>hello</span>")
$("<span>hello</span>").insertAfter(".head *:first")
$(".head *:first").before("<span>hello</span>")
$("<span>hello</span>").insertBefore(".head *:first")
|
$.load()方法
在指定位置加载请求回来的html页面
1
2
3
| <div class="head">
</div>
|
1
2
3
4
| $(".head").load(url[,data][,callback])
url: 请求HTML页面的URL地址
data(可选): 请求的key/value参数
callback(可选) 请求完成的回调函数
|
